<template>
  <ele-page class="p-0!" flex-table>
    <ele-bottom-bar :teleported="true">
      <template #extra>
        <el-button v-if="current?.is_qx === 1" type="info" @click="cancel()">取消</el-button>
        <el-button v-if="isDb" type="primary" @click="emit('onDb')">打包</el-button>
      </template>
    </ele-bottom-bar>
    <ele-split-panel
      flex-table
      size="280px"
      allow-collapse
      :custom-style="{ borderWidth: '0 1px 0 0', padding: '5px 0' }"
      :body-style="{ padding: '16px 16px 0 0', overflow: 'hidden' }"
      :style="{ height: '100%', overflow: 'visible' }"
    >
      <ele-loading
        :loading="loading"
        :style="{ flex: 1, paddingRight: '10px', overflow: 'auto' }"
      >
        <el-tree
          ref="treeRef"
          :data="treeData"
          highlight-current
          node-key="id"
          :props="{ label: 'inspect_order_sn' }"
          :expand-on-click-node="false"
          :default-expand-all="true"
          :filter-node-method="filterNode"
          :style="{
            '--ele-tree-item-height': '40px',
            '--ele-tree-expand-padding': 0,
            '--ele-tree-expand-margin': 0,
          }"
          @node-click="onNodeClick"
        >
          <template #default="{ data: d }">
            <div class="el-tree-node__label flex-ba w-full">
              <div style="margin-right: 4px">{{ d.inspect_order_sn }}</div>
              <el-tag :type="getType(d.status)">
                {{ d.status_name }}
              </el-tag>
            </div>
          </template>
        </el-tree>
      </ele-loading>
      <template #body>
        <template v-if="current">
          <el-descriptions title="验货单详情" :column="4">
            <el-descriptions-item :width="100" label="验货单号">
              {{ current.inspect_order_sn || '-' }}
            </el-descriptions-item>

            <el-descriptions-item :width="100" label="状态">
              <el-tag :type="getType(current.status, { YS: 'danger' })">{{ current.status_name }}</el-tag>
            </el-descriptions-item>

            <el-descriptions-item :width="100" label="创建人">
              {{ current.create_user_name || '-' }}
            </el-descriptions-item>

            <el-descriptions-item :width="100" label="创建时间">
              {{ current.create_time ? formatDate(current.create_time) : '-' }}
            </el-descriptions-item>
          </el-descriptions>
          <el-table
            :data="current.product_list"
            style="width: 100%"
            show-summary
            :summary-method="getSummaries"
            row-key="id"
            class="form-table"
          >
            <el-table-column type="index" label="序" width="60" align="center" />
            <el-table-column prop="product_name" label="商品名称" align="left" min-width="130" />
            <el-table-column prop="product_code" label="商品编码" align="center" />
            <el-table-column prop="pick_unit" label="拣货单位" align="center" />
            <el-table-column prop="pick_num" label="拣货数量" align="center" />
            <el-table-column prop="inspect_unit" label="验货数量" align="center" />
            <el-table-column prop="inspect_num" label="验货数量" align="center" />
          </el-table>
        </template>
      </template>
    </ele-split-panel>
  </ele-page>
</template>

<script setup>
const props = defineProps({
  orderId: Number,
  isDb: Boolean,
})

const emit = defineEmits(['done', 'onDb'])

const { formatDate, getType } = utils

const showEdit = ref(false)

const loading = ref(false)
const treeRef = ref(null)
const current = ref(null)
const treeData = ref([])

function cancel() {
  utils.confirm(`是否确定取消验货单 ${current.value.inspect_order_sn}`, '提示').then(() => {
    utils.post('/outboundInspect/cancel', { inspect_order_sn: current.value.inspect_order_sn }).then((res) => {
      utils.message(res.msg, res.success)
      if (res.success) {
        query()
      }
    })
  })
}

/** 树过滤方法 */
function filterNode(value, data) {
  if (value)
    return !!(data.order_sn && data.order_sn.includes(value))

  return true
}

/** 选择数据 */
function onNodeClick(row) {
  if (row?.id) {
    current.value = row
    treeRef.value?.setCurrentKey?.(row.id)
  }
  else {
    current.value = null
  }
  showEdit.value = false
}

/** 查询 */
function query(isfirst) {
  loading.value = true
  utils.get('/outbound/inspectList', { outbound_id: props.orderId }).then((res) => {
    treeData.value = res.data
    if (res.data.length) {
      nextTick(() => {
        const row = res.data.find(v => v.id === current.value?.id) ?? res.data[0]
        onNodeClick(row)
      })
    }
  }).finally(() => {
    loading.value = false
  })
  if (!isfirst) {
    emit('done')
  }
}

query(true)

function getSummaries({ columns, data }) {
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    const keys = ['pick_num', 'inspect_num']
    if (keys.includes(column.property)) {
      sums[index] = data.reduce((acc, cur) => utils.Big(acc).plus(cur[column.property]).valueOf(), 0)
    }
    else {
      sums[index] = ''
    }
  })

  return sums
}
</script>

<style lang="scss" scoped>

</style>
